<template>
	<view class="person">
		<view class="mine_box">
			<view class="mine_item headTop" @click="getPhoto">
				<view class="mine_item_label"><text class="text">头像</text></view>
				<view class="mine_item_icon">
					<image style="width: 100rpx;height: 100rpx;border-radius:100%;" mode="aspectFill" class="itemImg" :src="userInfo.avatar"></image>
				</view>
			</view>
			<view class="mine_item" @click="editName()">
				<view class="mine_item_label"><text class="text">昵称</text></view>
				<view class="mine_item_icon more">
					<text class="title">{{ name ? name : '' }}</text>
				</view>
			</view>
			<view class="mine_item">
				<view class="mine_item_label"><text class="text">手机号码</text></view>
				<view class="mine_item_icon">
					<text class="titleT">{{ phone ? phone : '' }}</text>
				</view>
			</view>
			<view class="mine_item">
				<view class="mine_item_label"><text class="text">类型</text></view>
				<view class="mine_item_icon">
					<text v-if="userType === 2" class="titleT">会员</text>
					<text v-else-if="userType === 3" class="titleT">业主</text>
				</view>
			</view>
			<view class="mine_item">
				<view class="mine_item_label"><text class="text">出生日期</text></view>
				<view class="mine_item_icon more">
					<picker mode="date" :value="date" start="1900-01-01" :end="endDate" @change="bindDateChange">
						<view class="uni-input title" :class="{ gray: date == '开始时间' }" v-if="birthDate">{{ birthDate }}</view>
						<view class="uni-input title" :class="{ gray: date == '开始时间' }" style="color: #fff" v-else>2020-02-01</view>
					</picker>
				</view>
			</view>
			<view class="mine_item">
				<view class="mine_item_label"><text class="text">城市</text></view>
				<view class="mine_item_icon">
					<text class="titleT">{{cityName || ''}}</text>
				</view>
			</view>
			
			<view class="mine_item" @click="editEmploy()">
				<view class="mine_item_label"><text class="text">员工认证</text></view>
				<view class="mine_item_icon more">
					<view class="title">
						<text v-if="approvalStatus == '认证中'">员工</text>
						{{approvalStatus}}
					</view>
				</view>
				<!-- <view class="mine_item_icon more" v-else>
					<view class="title" v-if="!status">
						<text v-if="approvalStatus == '认证中'">员工</text>
						{{approvalStatus}}
					</view>
					<view class="title" v-else>
						{{status}}
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import http, { uploadImages } from '@/common/request.js';
import { getCommonShareInfo } from '@/common/utils.js';
import bridgeApi from '../common/rayBridgeSDK.js';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
export default {
	onShareAppMessage() {
		return getCommonShareInfo()
	},
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			url: '',
			name: '',
			phone: '',
			userType: '',
			birthDate: '',
			date: '',
			diaryImg: '',
			approvalStatus: '',
			approvalContent: '',
			cityName: '',
			userName: '',
			status: ''
		};
	},
	components: {
		uniIcons,
		uniCalendar
	},
	computed: {
		...mapState({ userInfo: state => state.userInfo }),
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	onShow() {
		this.getMemgerInfo();
	},
	mounted() {
		// this.getMemgerInfo();
	},
	methods: {
		getMemgerInfo() {
			http('/api/cusUserInfo/getUserInfo', {
				data: {},
				method: 'GET'
			}).then(
				result => {
					let data = result.data || {};
					this.url = data.avatar;
					this.name = data.nickName;
					this.userName = data.userName || '';
					this.phone = data.phonenumber;
					this.userType = data.userType;
					this.birthDate = data.birthDate;
					this.approvalContent = data.staffInfo;
					// if(data.approvalStatus) {
					// 	this.approvalStatus = data.approvalStatus == '1' ? '认证中' : data.approvalStatus == '2' ? '认证通过' : '认证未通过'
					// } else {
					// 	this.status = '未认证'
					// }
					if(!data.approvalStatus) {
						this.approvalStatus = '未认证'
					} else if(data.approvalStatus == '1') {
						this.approvalStatus = '认证中'
					} else if(data.approvalStatus == '2') {
						console.log('----------------', data.approvalStatus)
						this.approvalStatus = '认证通过'
					} else {
						this.approvalStatus = '认证未通过'
					}
					
					
					
					this.cityName = data.cityName
					this.$store.commit('UPDATE_USERINFO', { avatar: this.url });
				},
				result => {
					this.showLoading = false;
					uni.showToast({
						title: result.msg,
						icon: 'none'
					});
				}
			);
		},
		editName(id) {
			uni.navigateTo({
				url: '/personal/editName?id=id',
				animationType: 'pop-in',
				animationDuration: 200
			});
		},
		edit() {
			http('/api/cusUserInfo', {
				data: {
					userId: this.userInfo.userId,
					birthDate: this.birthDate
				},
				method: 'PUT'
			}).then(
				result => {
					if (result.code == '200') {
						this.$store.commit('UPDATE_USERINFO', { birthDate: this.birthDate });
					}
				},
				result => {
					this.showLoading = false;
					uni.showToast({
						title: result.msg,
						icon: 'none'
					});
				}
			);
		},
		editEmploy() {
			uni.navigateTo({
				url: '/personal/editEmploy',
				animationType: 'pop-in',
				animationDuration: 200
			});
		},
		bindDateChange(e) {
			this.date = e.target.value;
			this.birthDate = e.target.value;
			this.edit();
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year;
			} else if (type === 'end') {
				year = year;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		// 获取图片
		getPhoto(e) {
			// #ifdef H5
			bridgeApi.chooseImage().then(res => {
				const files = [];
				for (let item of res) {
					files.push('data:image/png;base64,' + item.url);
				}

				this.uploadImages(files);
			});
			// #endif
			// #ifdef MP-WEIXIN
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: res => {
					this.uploadImages(res.tempFilePaths);
				}
			});
			// #endif
		},
		uploadImages(files) {
			const list = [];
			for (let item of files) {
				list.push({
					name: 'file',
					uri: item
				});
			}
			uploadImages('/fastdfs/upload/multiUpload', {
				fileList: list
			})
				.then(result => {
					const ids = JSON.parse(result[0]).data;
					this.updateImage(ids);
				})
				.catch(e => {
					console.log(e);
				});
		},
		quit() {
			uni.navigateBack({
				delta: 1,
				animationType: 'pop-out',
				animationDuration: 200
			});
		},
		updateImage(fileIds) {
			http('/api/cusUserInfo', {
				data: {
					userId: this.userInfo.userId,
					birthDate: this.birthDate,
					fileIds
				},
				method: 'PUT'
			}).then(
				result => {
					if (result.code == '200') {
						this.getMemgerInfo();
					}
				},
				result => {
					this.showLoading = false;
					uni.showToast({
						title: result.msg,
						icon: 'none'
					});
				}
			);
		}
	}
};
</script>

<style lang="less" scoped>
.title {
	margin-right: 14rpx;
}
.titleT {
	margin-right: 36rpx;
}
.uni-icons {
	margin-right: -4rpx;
}
.person {
	margin-top: 24rpx;
	position: relative;
}
.mine_box {
	background-color: #fff;
	margin-bottom: 30rpx;
	.mine_item:before {
		content: '';
		position: absolute;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		top: 0;
		left: 0;
		right: 0;
		height: 1px;
		// border-bottom: solid 1px rgba(102, 100, 90, 0.1);
		box-sizing: border-box;
		background: rgba(102, 100, 90, 0.1);
	}
	.mine_item {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx 0;
		margin: 0 28rpx;
		&:last-child {
			border: none;
		}
		.mine_item_label {
			flex: 1;
			display: flex;
			align-items: center;
			.img {
				display: inline-block;
				width: 100rpx;
				height: 100rpx;
				.itemImg {
					width: 100rpx;
					height: 100rpx;
				}
			}
			.text {
				font-size: 30rpx;
				color: #666;
			}
		}

		.mine_item_icon {
			color: #8a8c8d;
			font-size: 30rpx;
			flex-grow: 1;
			justify-content: flex-end;
			text-align: right;
		}
	}
	.headTop {
		height: 148rpx;
	}
}
</style>
